<template>
    <div class="dir">
       <div v-drag class="box">123</div> 
       <div class="box2" v-drag></div>
       <input type="text" v-focuss>
    </div>
</template>
<script>
export default {
    data() {
        return {
            
        }
    },
    // 局部的自定义指令
    directives:{
        focuss:{
            inserted(el,binding,vnode,prenode){

               el.focus()

            }
        },
        drag(el,binding,vnode,prenode){
          console.log(el);//绑定自定义指令的dom节点
        //   给el节点绑定一个鼠标按下事件
        el.onmousedown = function(e){
           
            console.log(e.offsetX,e.offsetY);//offsetX offsetY  获取到鼠标在盒子位置
            console.log('按下');
            // boxX  boxY  是鼠标在盒子的位置
            let boxX = e.offsetX
            let boxY = e.offsetY
            document.onmousemove = function(e){
                 console.log(e.pageX,e.pageY) //鼠标在页面的位置\
                // 获取 盒子距离左边的距离  盒子距离上边的距离  （变量 ）
                //   leftX  和topY 就是盒子距离左边和上面的距离
                let leftX = e.pageX - boxX
                let topY = e.pageY - boxY

                // 把得到的 盒子距离距离左边和上面的距离给box的left和top就可以了
                // 考虑边界值
                // 左边
                console.log(window.innerWidth);//获取屏幕的宽度
                console.log(el.offsetWidth,'***'); // 获取box的宽度
                if(leftX<=0){
                    leftX = 0
                }else if(leftX>window.innerWidth - el.offsetWidth){
                     leftY = widow.innerWidth - el.offsetWidth
                }

                el.style.left = leftX+'px'
                el.style.top = topY+'px'
                // 事件的解绑
                document.onmouseup = function(){
                    document.onmousemove = null
                }



            }
        }

        },
        
    }
}
</script>
<style lang="scss" scoped>
.box{
   width: 400px;
   height: 300px;
   background: red;
   position: fixed;
   left:calc(50% - 200px);
   top:calc(50% - 150px);
}
.box2{
   width: 100px;
   height: 100px;
   background: green;
   position: fixed;
   left:0;
   right:0
}
</style>

